<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="select">
    <input type="text" name="" id="val">
    <button onclick="select()">查询</button>
    <button onclick="updateData.call(this)">更新</button>
    <ul>
        
    </ul>

    <script>
        // var eles = document.querySelectorAll("ul>li");
        var tmp = document.createDocumentFragment();
        var students = Array.from(new Array(5).keys()).map((ele, i) => {
            let stu = {
                id: i,
                age: 10 + i
            };
            var li = document.createElement('li');
            tmp.appendChild(li);
            Object.defineProperty(stu, 'name', {
                set(val) {
                    li.innerText = val;
                },
                get() {
                    return  li.innerText;
                }
            });
            stu.name = 'stu'+i;
            return stu;
        });
        document.querySelector("ul").appendChild(tmp);
        console.log(students);

        function select() {
            var id = document.querySelector("#select").value;
            var eles = document.querySelectorAll("ul>li");
            console.log((eles[id].stu));
            console.dir(eles[id]);
        }
        function updateData() {
            console.log(this);
            var eles = document.querySelectorAll("ul>li");
            var id = this.previousElementSibling.previousElementSibling.previousElementSibling.value;
            var val = this.previousElementSibling.previousElementSibling.value;
            eles[id].innerText = val;
        }
    </script>
</body>

</html>